<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>详情</title>
    <link rel="icon" href="https://www.womai.com/favicon.ico" />
    <link rel="stylesheet" href="../css/list.css" />
    <link rel="stylesheet" href="../css/jquery.exzoom.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous"
    />
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
      integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
      crossorigin="anonymous"
    ></script>
  </head>

  <body>
    <!-- 顶部用户信息 -->
    <div class="user-warp">
      <div class="user">
        <!-- 左边 -->
        <div class="user-left">
          <ul>
            <li>当前城市：</li>
            <li>北京</li>
            <li>hi，欢迎来我买网！</li>
            <a href="./login.html">
              <li>登录</li>
            </a>
            <a href="./reg.html">
              <li>注册</li>
            </a>
          </ul>
        </div>
        <!-- 右边 -->
        <div class="user-right">
          <span class="txt">我的账户</span>
          <ul>
            <a href="./cart.html">
              <li>购物车<span>0</span>件</li>
            </a>
            <li class="kf">客户服务</li>
            <li>企业购</li>
          </ul>
          <img src="" alt="" />
        </div>
        <div class="k1">
          <p>帮助中心</p>
          <p>新手上路</p>
        </div>
      </div>
    </div>
    <!-- 头部 第一部分 -->
    <div class="headbox">
      <!-- 上部 -->
      <div class="top">
        <div class="top-left">
          <a href="/html/index.html"
            ><img
              src="/img/6.png"
              alt=""
          /></a>
        </div>
        <div class="top-center">
          <div class="ipt">
            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
            <button>搜索</button>
            <input type="text" class="sousuo" />
          </div>
          <div class="list">
            <span>礼盒</span>
            <span>粮油</span>
            <span>大米</span>
            <span>牛奶</span>
          </div>
          <!-- 搜索下拉框 -->
          <!-- <div class="sousuo-ul">

                </div> -->
        </div>
        <div class="top-right">
          <img
            src="/img/7.png"
            alt=""
          />
        </div>
      </div>
      <!-- 下部 -->
      <div class="bottom">
        <div class="bottom-left">
          <div class="all" style="background: #2d8800">全部商品分类</div>
          <span>团购</span>
        </div>
        <div class="bottom-right">
          <span
            class="glyphicon glyphicon-shopping-cart"
            aria-hidden="true"
          ></span>
          <a href="./cart.html"><span class="gw">购物车</span></a>
        </div>
      </div>
    </div>
    <!-- 横线 -->
    <div class="warp" style="height: 2px; background: #2d8800">
      <div
        style="width: 1210px; height: 2px; background: #2d8800; margin: 0 auto"
      ></div>
    </div>
    <!-- 全部商品 -->
    <div class="swirp-left">
      <ul>
        <li>
          <div
            class="bg-img"
            style="
              background: url(/img/8.png)
                no-repeat 0px;
            "
          ></div>
          <span>肉禽水产</span>
          <span>水果蔬菜</span>
        </li>
        <li>
          <div
            class="bg-img"
            style="
              background: url(/img/9.png)
                no-repeat 0px;
            "
          ></div>
          <span>进口食品</span>
          <span>进口直采</span>
        </li>
        <li>
          <div
            class="bg-img"
            style="
              background: url(/img/10.png)
                no-repeat 0px;
            "
          ></div>
          <span>酒</span>
          <span>饮料/冲调</span>
          <span>茶</span>
        </li>
        <li>
          <div
            class="bg-img"
            style="
              background: url(/img/11.png)
                no-repeat 0px;
            "
          ></div>
          <span>休闲食品</span>
          <span>地方特产</span>
        </li>
        <li>
          <div
            class="bg-img"
            style="
              background: url(/img/12.png)
                no-repeat 0px;
            "
          ></div>
          <span>营养健康</span>
          <span>奶制品</span>
        </li>
        <li>
          <div
            class="bg-img"
            style="
              background: url(/img/13.png)
                no-repeat 0px;
            "
          ></div>
          <span>粮油副食</span>
          <span>调味干货</span>
        </li>
        <li>
          <div
            class="bg-img"
            style="
              background: url(/img/14.png)
                no-repeat 0px;
            "
          ></div>
          <span>母婴食品</span>
        </li>
        <li>
          <div
            class="bg-img"
            style="
              background: url(/img/15.png)
                no-repeat 0px;
            "
          ></div>
          <span>礼卡礼券</span>
        </li>
        <li>
          <div
            class="bg-img"
            style="
              background: url(/img/16.png)
                no-repeat 0px;
            "
          ></div>
          <span>中粮制造</span>
        </li>
        <li>
          <div
            class="bg-img"
            style="
              background: url(/img/17.png)
                no-repeat 0px;
            "
          ></div>
          <span>我买品牌</span>
        </li>
      </ul>
    </div>

    <!-- 详情内容 -->
    <div class="detail">
      <div class="detail-left">
        <!-- <img src="" alt="" class="img1">
            <img src="" alt="" class="img2"> -->
        <div class="exzoom" id="exzoom">
          <!--大图区域-->
          <div class="exzoom_img_box">
            <ul class="exzoom_img_ul">
              <li><img src="/img/67.png" alt="" class="img1" /></li>
            </ul>
          </div>
          <!--缩略图导航-->
          <div class="exzoom_nav"></div>
        </div>
      </div>
      <!-- 右 -->
      <div class="detail-right">
        <p></p>
        <span class="kaquan"
          >特惠品部分卡券不可使用；全球购不支持使用我买卡</span
        >
        <section class="price">
          <span class="danjia"></span>
          <span class="qinggou">抢购价</span>
          <span class="jiangjia">(降价通知)</span>
        </section>
        <section class="gouwuche">
          数量：
          <input type="button" value="-" class="jian" />
          <input type="button" value="1" class="num" />
          <input type="button" value="+" class="jia" />
          <div class="gouwuche-btn">
            <button class="push">加入购物车</button>
            <button class="saoyisao">扫一扫下单</button>
          </div>
        </section>
      </div>
    </div>

    <!-- 底部导航 -->
    <div class="bottom-nav-warp">
      <div class="bottom-nav">
        <div class="left">
          <li>
            <p>新手上路</p>
            <span>新用户演示</span>
            <span>会员积分计划</span>
            <span>会员等级规则</span>
            <span>售后服务政策</span>
            <span>我买网发票制度</span>
          </li>
          <li>
            <p>新手上路</p>
            <span>新用户演示</span>
            <span>会员积分计划</span>
            <span>会员等级规则</span>
            <span>售后服务政策</span>
            <span>我买网发票制度</span>
          </li>
          <li>
            <p>新手上路</p>
            <span>新用户演示</span>
            <span>会员积分计划</span>
            <span>会员等级规则</span>
            <span>售后服务政策</span>
            <span>我买网发票制度</span>
          </li>
          <li>
            <p>新手上路</p>
            <span>新用户演示</span>
            <span>会员积分计划</span>
            <span>会员等级规则</span>
            <span>售后服务政策</span>
            <span>我买网发票制度</span>
          </li>
        </div>
        <!-- 右1 -->
        <div class="right-1">
          <p>中粮我买网APP</p>
          <img
            src="/img/105.png"
            alt=""
          />
        </div>
        <div class="right-2">
          <p>中粮我买网微信</p>
          <img
            src="/img/106.png"
            alt=""
          />
        </div>
      </div>
    </div>

    <!-- 底部内容 -->
    <div class="bottom-text">
      <img src="/img/107.png" alt="" />
    </div>

    <!-- 右侧导航 -->
    <div class="right-nav">
      <div class="top">
        <span
          class="glyphicon glyphicon-shopping-cart"
          aria-hidden="true"
        ></span>
        <section>购物车</section>
        <span class="num">0</span>
      </div>

      <div class="bottom">
        <!-- 收藏 -->
        <span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
        <!-- 钱 -->
        <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
        <!-- 充值 -->
        <span class="glyphicon glyphicon-usd" aria-hidden="true"></span>
        <!-- 二维码 -->
        <span class="glyphicon glyphicon-barcode" aria-hidden="true"></span>
        <!-- 回到顶部 -->
        <span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span>
      </div>
    </div>

    <!-- js -->
    <link rel="stylesheet" href="../css/detail.css" />
    <script src="../js/detail.js"></script>
    <script src="../js/jquery.exzoom.js"></script>
    <script type="text/javascript">
      $("#exzoom").exzoom({
        autoPlay: false,
      }); //方法调用，务必在加载完后执行
    </script>
  </body>
</html>
